<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/07.css">
</head>
<body>
    <p>[选择器]:first-child 匹配兄弟元素中处于父元素第一位的兄弟元素</p>
    <p>[选择器]:last-child 匹配兄弟元素中处于父元素的最后一个元素</p>
    <p>[选择器]:first-of-type 匹配兄弟元素中第一个该元素</p>
    <p>[选择器]:last-of-type 匹配兄弟元素中最后一个该元素</p>
    <p>[选择器]:nth-child(基于n关键字的运算表达式或关键字[even|odd]) 匹配兄弟元素中固定位置的元素</p>
    <div class="p-list">
        <p>元素1</p>
        <p>元素2</p>
        <p>元素3</p>
    </div>
    <hr>
    <div class="p-list">
        <p>元素1</p>
        <div>div元素</div>
        <p>元素2</p>
        <p>元素3</p>
    </div>
    <hr>
    <div class="p-list">
        <p>元素1</p>
    </div>
    <hr>
    <div class="p-list">
        <p>元素1</p>
        <div>
            <p>div-p元素1</p>
            <p>div-元素2</p>
            <p>div-元素3</p>
        </div>
        <p>元素2</p>
        <p>元素3</p>
    </div>
    <hr>
    <div class="p-list">
        <span>span</span>
        <div>div元素1</div>
        <div>div元素2</div>
        <div>div元素3</div>
        <span>span</span>
    </div>
    <hr>
    <ul class="ul-list">
        <li>元素1</li>
        <li>元素2</li>
        <li>元素3</li>
        <li>元素4</li>
        <li>元素5</li>
<!--        <span>111</span>-->
        <li>元素6</li>
        <li>元素7</li>
        <li>元素8</li>
        <li>元素9</li>
        <li>元素10</li>
    </ul>
    <hr>

    <p>[选择器]:is(选择器) 在前置选择器进行首次元素选择后，进行再次筛选</p>
    <p>[选择器]:not(选择器) 在前置选择器进行首次元素选择后，进行再次筛选</p>
    <div class="div-list">
        <p>在前置选择器进行首次元素选择后</p>
        <p class="div-p">在前置选择器进行首次元素选择后</p>
        <p class="div-p">在前置选择器进行首次元素选择后</p>
        <p>在前置选择器进行首次元素选择后</p>
        <p class="div-p">在前置选择器进行首次元素选择后</p>
        <p class="div-p">在前置选择器进行首次元素选择后</p>
    </div>
    <hr>

    <p>[选择器]:checked 匹配表单元素的选中状态</p>
    <div class="checbox">
        <input type="checkbox">
        <span>同意</span>
    </div>
    <hr>

    <p>[选择器]:disabled 匹配表单元素中被禁用的元素</p>
    <input type="text" value="启用">
    <form action="" method="get">
    <!--  disabled 将当前表单元素定义为不可操作状态(页面不可操作+数据不可提交)  -->
        <input type="text" name="arg" value="禁用" disabled> <br>
    <!--  readonly 将当前表单元素定义为只读状态(页面不可操作+数据可提交)  -->
        <input type="text" name="arg1" value="只读" readonly>
        <input type="submit" value="提交">
    </form>

</body>
</html>